<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/xlrblog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/xlrblog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/xlrblog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/xlrblog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/xlrblog/css/main.css">


<link rel="stylesheet" href="/xlrblog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"gitee.com","root":"/xlrblog/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。 JavaScript 是用来控制网页行为的，它能使网页可交互。 JavaScript(简称:JS)在1995年由Brendan Eich 发明，并于1997年成为一部EC">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript学习">
<meta property="og:url" content="https://gitee.com/xlr0306/2023/01/21/JavaScript%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="君不见的博客">
<meta property="og:description" content="JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。 JavaScript 是用来控制网页行为的，它能使网页可交互。 JavaScript(简称:JS)在1995年由Brendan Eich 发明，并于1997年成为一部EC">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://note.youdao.com/yws/api/personal/file/WEB6229b763ffe38cefea75d2115c9f706a?method=download&shareKey=fed9f09dd3ade16ace966c35b96171ec">
<meta property="article:published_time" content="2023-01-21T02:44:26.000Z">
<meta property="article:modified_time" content="2023-01-21T02:47:27.454Z">
<meta property="article:author" content="君不见">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://note.youdao.com/yws/api/personal/file/WEB6229b763ffe38cefea75d2115c9f706a?method=download&shareKey=fed9f09dd3ade16ace966c35b96171ec">

<link rel="canonical" href="https://gitee.com/xlr0306/2023/01/21/JavaScript%E5%AD%A6%E4%B9%A0/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>JavaScript学习 | 君不见的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/xlrblog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">君不见的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">记录生活中的点点滴滴</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/xlrblog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/xlrblog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/xlrblog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/xlrblog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gitee.com/xlr0306/2023/01/21/JavaScript%E5%AD%A6%E4%B9%A0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/xlrblog/images/avatar.gif">
      <meta itemprop="name" content="君不见">
      <meta itemprop="description" content="君不见，黄河之水天上来，奔流到海不复回。">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="君不见的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript学习
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2023-01-21 10:44:26 / 修改时间：10:47:27" itemprop="dateCreated datePublished" datetime="2023-01-21T10:44:26+08:00">2023-01-21</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/xlrblog/categories/Java-Web/" itemprop="url" rel="index"><span itemprop="name">Java Web</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。 JavaScript 是用来控制网页行为的，它能使网页可交互。</p>
<p>JavaScript(简称:JS)在1995年由Brendan Eich 发明，并于1997年成为一部ECMA 标准。</p>
<p>ECMAScript 6(ES6)是最新的JavaScript 版本（发布于2015年)。</p>
<h2 id="JavaScript引入方式"><a href="#JavaScript引入方式" class="headerlink" title="JavaScript引入方式"></a>JavaScript引入方式</h2><p>JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：</p>
<ul>
<li>内部脚本：将 JS代码定义在HTML页面中 </li>
<li>外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中</li>
</ul>
<p><strong>内部脚本</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--内部脚本--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;Hello JavaScript!&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>一般把脚本置于 元素的底部，可改善显示速度 。</p>
<p>因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该让用户看到页面内容，然后再展示动态的效果。</p>
<p><strong>外部脚本</strong>：</p>
<p>首先定义外部 js 文件。</p>
<p>demo.js:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;Hello JavaScript!!&quot;</span>);</span><br></pre></td></tr></table></figure>

<p>然后在页面中引入外部的js文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--内部脚本--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;script&gt;</span></span><br><span class="line"><span class="comment">        alert(&quot;Hello JavaScript!&quot;)</span></span><br><span class="line"><span class="comment">    &lt;/script&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--外部脚本--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../js/demo.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意</strong></p>
<ul>
<li><p>外部脚本不能包含 &lt;script&gt; 标签 </p>
<p>在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签 </p>
</li>
<li><p>&lt;script&gt; 标签不能自闭合 </p>
<p>在页面中引入外部js文件时，不能写成 &lt;script src&#x3D;”..&#x2F;js&#x2F;demo.js” &#x2F;&gt;。</p>
</li>
</ul>
<h2 id="JavaScript基础语法"><a href="#JavaScript基础语法" class="headerlink" title="JavaScript基础语法"></a>JavaScript基础语法</h2><h3 id="书写语法"><a href="#书写语法" class="headerlink" title="书写语法"></a>书写语法</h3><ul>
<li><p>区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的 </p>
</li>
<li><p>每行结尾的分号可有可无 </p>
<p>如果一行上写多个语句时，必须加分号用来区分多个语句。 </p>
</li>
<li><p>注释 </p>
<p>单行注释：&#x2F;&#x2F; 注释内容 </p>
<p>多行注释：&#x2F;* 注释内容 *&#x2F; </p>
<p>注意：JavaScript 没有文档注释 </p>
</li>
<li><p>大括号表示代码块 </p>
<p>和 java 一样 大括号表示代码块。</p>
</li>
</ul>
<h3 id="输出语句"><a href="#输出语句" class="headerlink" title="输出语句"></a>输出语句</h3><ul>
<li><p>使用window.alert() 写入警告框</p>
<p>window.可以省略</p>
</li>
<li><p>使用document.write() 写入HTML输出</p>
</li>
<li><p>使用console.log() 写入浏览器控制台</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">window</span>.<span class="title function_">alert</span>(<span class="string">&quot;Hello JS!&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;Hello JS!!&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Hello JS!!!&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在谷歌浏览器右键选择检查，再点击Console可打开浏览器控制台。</p>
<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><p>JavaScript 中用 var 关键字（variable 的缩写）来声明变量。</p>
<p>格式 <code>var 变量名 = 数据值;</code> 。</p>
<p>JavaScript 是一门弱类型语言，变量可以存放不同类型的值；</p>
<p>如在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数据。</p>
<p>js 中的变量名命名也有如下规则，和java语言基本都相同 </p>
<ul>
<li>组成字符可以是任何字母、数字、下划线（_）或美元符号（$） </li>
<li>数字不能开头 </li>
<li>建议使用驼峰命名</li>
</ul>
<p>JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样 。</p>
<ul>
<li><p>作用域：全局变量，在代码块中定义的变量，在代码块外边还可以使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    str = &quot;Hello JS!&quot;;</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">window.alert(str);</span><br></pre></td></tr></table></figure>
</li>
<li><p>变量可以重复定义，JavaScript 会用后面赋的值将之前变量的 值替换掉。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    str = &quot;Hello JS!&quot;;</span><br><span class="line">    str = &quot;Hello&quot;;</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">window.alert(str);   //打印的结果是Hello</span><br></pre></td></tr></table></figure></li>
</ul>
<p>ECMAScript 6 新增了 <strong>let 关键字</strong>来定义变量。它的用法类似于 var ，但是所声明的变量，<strong>只在 let 关键字所在的代码块内有效</strong>，<strong>且不允许重复声明</strong>。</p>
<p>ECMAScript 6 新增了 <strong>const关键字</strong>，用来声明一个<strong>只读的常量</strong>。一旦声明，常量的值就<strong>不能改变</strong>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const s = &quot;Hello&quot;;</span><br><span class="line">// s = &quot;hello&quot;;</span><br></pre></td></tr></table></figure>

<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>JavaScript 中提供了两类数据类型：原始类型 和 引用类型。 </p>
<p>5种原始类型:</p>
<ul>
<li>number:数字（整数、小数、 NaN(Not a Number))</li>
<li>string:字符、字符串，单双引皆可</li>
<li>boolean:布尔。true，false</li>
<li>null:对象为空</li>
<li>undefined:当声明的变量未初始化时，该变量的默认值是undefined</li>
</ul>
<p>使用 typeof 运算符可以获取数据类型。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.alert(typeof(str));</span><br></pre></td></tr></table></figure>

<h3 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h3><p>JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 &#x3D;&#x3D; 和 &#x3D;&#x3D;&#x3D; 。</p>
<ul>
<li>一元运算符：++，– </li>
<li>算术运算符：+，-，*，&#x2F;，% </li>
<li>赋值运算符：&#x3D;，+&#x3D;，-&#x3D;… </li>
<li>关系运算符：&gt;，&lt;，&gt;&#x3D;，&lt;&#x3D;，!&#x3D;，&#x3D;&#x3D;，&#x3D;&#x3D;&#x3D;… </li>
<li>逻辑运算符：&amp;&amp;，||，! </li>
<li>三元运算符：条件表达式 ? true_value : false_value</li>
</ul>
<h4 id="x3D-x3D-和-x3D-x3D-x3D-区别"><a href="#x3D-x3D-和-x3D-x3D-x3D-区别" class="headerlink" title="&#x3D;&#x3D;和&#x3D;&#x3D;&#x3D;区别"></a>&#x3D;&#x3D;和&#x3D;&#x3D;&#x3D;区别</h4><p>&#x3D;&#x3D;： </p>
<ol>
<li>判断类型是否一样，如果不一样，则进行类型转换 </li>
<li>再去比较其值</li>
</ol>
<p>&#x3D;&#x3D;&#x3D;：js 中的全等于 </p>
<ol>
<li>判断类型是否一样，如果不一样，直接返回false </li>
<li>再去比较其值</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var num1=&quot;20&quot;;</span><br><span class="line">var num2=20;</span><br><span class="line"></span><br><span class="line">alert(num1 == num2);  //true</span><br><span class="line">alert(num1 === num2);  //false</span><br></pre></td></tr></table></figure>

<h4 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h4><p>其他类型转为number </p>
<ul>
<li><p>string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值<strong>不是数字，则转为NaN</strong> </p>
<p>将 string 转换为 number 有两种方式：</p>
<ul>
<li><p>使用 + 正好运算符</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var num1=+&quot;20&quot;;</span><br><span class="line">    </span><br><span class="line">alert(num1+1);  // 21</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用parseInt()函数（方法）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var num1=&quot;20&quot;;</span><br><span class="line">    </span><br><span class="line">alert(parseInt(num1)+1);  // 21</span><br></pre></td></tr></table></figure></li>
</ul>
<p>建议使用 parseInt() 函数进行转换。 </p>
</li>
<li><p>boolean 转换为 number 类型：true 转为1，false转为0</p>
</li>
</ul>
<p>其他类型转为boolean </p>
<ul>
<li>number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true </li>
<li>string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true </li>
<li>null类型转换为 boolean 类型是 false </li>
<li>undefined 转换为 boolean 类型是 false</li>
</ul>
<h3 id="流程控制语句"><a href="#流程控制语句" class="headerlink" title="流程控制语句"></a>流程控制语句</h3><p>JavaScript 中提供了和 Java 一样的流程控制语句，如下 </p>
<ul>
<li>if </li>
<li>switch </li>
<li>for </li>
<li>while </li>
<li>do … while</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> j = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">if</span> (j == <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;j == 0&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;j != 0&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>;i &lt; <span class="number">5</span>;i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">switch</span> (i) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">case</span> <span class="number">0</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;swotch:i == 0&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">case</span> <span class="number">1</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;switch:i == 1&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">default</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;switch:i != 0 &amp;&amp; i != 1&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">break</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">while</span> (j &lt; <span class="number">5</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        j++;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;j=&quot;</span>+j);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">do</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        j--;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;j = &quot;</span>+j);</span></span><br><span class="line"><span class="language-javascript">    &#125; <span class="keyword">while</span> (j &gt; <span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><p>函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。 </p>
<p>函数定义格式有两种：</p>
<ul>
<li><p>方式一</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function 函数名(参数1,参数2..)&#123;</span><br><span class="line">	要执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>方式二</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var 函数名 = function (参数列表)&#123;</span><br><span class="line">	要执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<p>形式参数不需要类型。因为JavaScript是弱类型语言 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function add(a, b)&#123;</span><br><span class="line">	return a + b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。 </p>
<p>返回值也不需要定义类型，可以在函数内部直接使用return返回即可。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a,b</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> a+b;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> add2 = <span class="keyword">function</span> (<span class="params">a,b</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> a+b;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> res = <span class="title function_">add</span>(<span class="number">11</span>,<span class="number">12</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> res2 = <span class="title function_">add2</span>(<span class="number">10</span>,<span class="number">10</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(res+<span class="string">&quot; &quot;</span>+res2);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong> </p>
<p>JS中，函数调用可以传递任意个数参数 </p>
<p>例如 <code>let result = add(1,2,3);</code> </p>
<p>它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收.</p>
<h2 id="JavaScript常用对象"><a href="#JavaScript常用对象" class="headerlink" title="JavaScript常用对象"></a>JavaScript常用对象</h2><h3 id="基本对象"><a href="#基本对象" class="headerlink" title="基本对象"></a>基本对象</h3><h4 id="Array对象"><a href="#Array对象" class="headerlink" title="Array对象"></a>Array对象</h4><p>JavaScript Array对象用于定义数组 。</p>
<h5 id="定义格式"><a href="#定义格式" class="headerlink" title="定义格式"></a>定义格式</h5><ul>
<li><p>方式一</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var 变量名 = new Array(元素列表);</span><br></pre></td></tr></table></figure>
</li>
<li><p>方式二</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var 变量名 = [元素列表];</span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="元素访问"><a href="#元素访问" class="headerlink" title="元素访问"></a>元素访问</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr[索引] = 值;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//方式一</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> arr1 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//方式二</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> arr2 = [<span class="number">5</span>,<span class="number">4</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">1</span>];</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(arr1[<span class="number">0</span>]+<span class="string">&quot; &quot;</span>+arr2[<span class="number">4</span>]);  <span class="comment">//1 1</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h5><p>JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var arr3 = [1,2,3];</span><br><span class="line">arr3[10] = 10;</span><br><span class="line">alert(arr3[10]); // 10</span><br><span class="line">alert(arr3[9]); //undefined</span><br><span class="line"></span><br><span class="line">arr3[5] = &quot;hello&quot;;</span><br><span class="line">alert(arr3[5]); // hello</span><br><span class="line"></span><br><span class="line">for (let i = 0;i &lt; 11;i++) &#123;</span><br><span class="line">    alert(arr3[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h5><p>我们只讲解 length 属性，该数组可以动态的获取数组的长度。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var arr = [1,2,3];</span><br><span class="line">for (let i = 0; i &lt; arr.length; i++) &#123;</span><br><span class="line">    alert(arr[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h5><p>push函数：给数组添加元素，也就是在数组的末尾添加元素 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span></span><br><span class="line"><span class="language-javascript">    arr.<span class="title function_">push</span>(<span class="number">4</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(arr);  <span class="comment">//1,2,3,4</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>splice函数:删除元素</p>
<p>参数1：索引，表示从哪个索引位置删除 </p>
<p>参数2：个数，表示删除几个元素 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span></span><br><span class="line"><span class="language-javascript">    arr.<span class="title function_">splice</span>(<span class="number">2</span>,<span class="number">3</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(arr);  <span class="comment">//1,2,6</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="String对象"><a href="#String对象" class="headerlink" title="String对象"></a>String对象</h4><h5 id="定义格式-1"><a href="#定义格式-1" class="headerlink" title="定义格式"></a>定义格式</h5><ul>
<li><p>方式一</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var 变量名 = new String(s);</span><br></pre></td></tr></table></figure>
</li>
<li><p>方式二</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var 变量名 = &quot;数组&quot;;</span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> str1 = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&quot;Hello&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> str2 = <span class="string">&quot;World&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(str1+<span class="string">&quot; &quot;</span>+str2);  <span class="comment">// Hello World</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="属性-1"><a href="#属性-1" class="headerlink" title="属性"></a>属性</h5><p>String对象提供了很多属性，下面列举了一个属性 length ，该属性是用于动态的获取字符串的长度 。</p>
<ul>
<li>length:字符串的长度</li>
</ul>
<h5 id="函数-1"><a href="#函数-1" class="headerlink" title="函数"></a>函数</h5><p>String对象提供了很多函数（方法），下面给大家列举了两个方法 </p>
<ul>
<li>charAt() : 返回在指定位置的字符</li>
<li>indexOf() : 检索字符串</li>
</ul>
<p>String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> str = <span class="string">&quot;  Hello World!  &quot;</span>;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> ch1 = str.<span class="title function_">charAt</span>(<span class="number">2</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> ch2 = str.<span class="title function_">indexOf</span>(<span class="string">&quot;W&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> str2 = str.<span class="title function_">trim</span>();</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(ch1+<span class="string">&quot; &quot;</span>+ch2+<span class="string">&quot; &quot;</span>+str2);  <span class="comment">// H 8 Hello WOrld!</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="自定义对象"><a href="#自定义对象" class="headerlink" title="自定义对象"></a>自定义对象</h3><p>下面是自定义对象的格式： </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var 对象名称 = &#123;</span><br><span class="line">    属性名称1:属性值1,</span><br><span class="line">    属性名称2:属性值2,</span><br><span class="line">    ...,</span><br><span class="line">    函数名称:function (形参列表)&#123;&#125;,</span><br><span class="line">    ...</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>调用属性的格式： </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">对象名.属性名</span><br></pre></td></tr></table></figure>

<p>调用函数的格式:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">对象名.函数名()</span><br></pre></td></tr></table></figure>

<p>代码演示 :</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> person = &#123;</span></span><br><span class="line"><span class="language-javascript">        name : <span class="string">&quot;XiaoMing&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        age : <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript">        work : <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">alert</span>(<span class="string">&quot;XiaoMing is Working!&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(person.<span class="property">name</span>);  <span class="comment">// XiaoMing</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(person.<span class="property">age</span>);  <span class="comment">// 18</span></span></span><br><span class="line"><span class="language-javascript">    person.<span class="title function_">work</span>();  <span class="comment">// XiaoMing is Working!</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h2><p>BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。</p>
<p>BOM 中包含了如下对象： </p>
<ul>
<li>Window：浏览器窗口对象 </li>
<li>Navigator：浏览器对象 </li>
<li>Screen：屏幕对象 </li>
<li>History：历史记录对象 </li>
<li>Location：地址栏对象</li>
</ul>
<p><img src="https://note.youdao.com/yws/api/personal/file/WEB6229b763ffe38cefea75d2115c9f706a?method=download&shareKey=fed9f09dd3ade16ace966c35b96171ec" alt="对应关系"></p>
<h3 id="Window对象"><a href="#Window对象" class="headerlink" title="Window对象"></a>Window对象</h3><p>window 对象是 JavaScript 对浏览器的窗口进行封装的对象。 </p>
<h4 id="获取window对象"><a href="#获取window对象" class="headerlink" title="获取window对象"></a>获取window对象</h4><p>该对象不需要创建直接使用 window ，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数。</p>
<ul>
<li><p>显示使用Window对象调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.alert(&quot;xxx&quot;);</span><br></pre></td></tr></table></figure>
</li>
<li><p>隐式调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(&quot;xxx&quot;);</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="window对象属性"><a href="#window对象属性" class="headerlink" title="window对象属性"></a>window对象属性</h4><p>window 对象提供了用于获取其他 BOM 组成对象的属性 </p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>history</td>
<td>对History 对象的只读引用。</td>
</tr>
<tr>
<td>location</td>
<td>用于窗口或框架的Location对象。</td>
</tr>
<tr>
<td>Navigator</td>
<td>对Navigator对象的只读引用。</td>
</tr>
<tr>
<td>Screen</td>
<td>对Screen 对象的只读引用。</td>
</tr>
</tbody></table>
<p>也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location ，而 window. 可以 省略，简化写成 location 来获取 Location 对象。 </p>
<h4 id="window对象函数"><a href="#window对象函数" class="headerlink" title="window对象函数"></a>window对象函数</h4><p>window 对象提供了很多函数供我们使用，而很多都不常用；下面列举了一些比较常用的函数 。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>alert()</td>
<td>显示带有一段消息和一个确认按钮的警告框。</td>
</tr>
<tr>
<td>confirm()</td>
<td>显示带有一段消息以及确认按钮和取消按钮的对话框。</td>
</tr>
<tr>
<td>setInterval()</td>
<td>按照指定的周期(以毫秒计算)来调用函数或计算表达式。</td>
</tr>
<tr>
<td>setTimeout()</td>
<td>在指定的毫秒数后调用函数或计算表达式。</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> flag = <span class="title function_">confirm</span>(<span class="string">&quot;Are You OK?&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//当点击 确定 按钮， flag 变量值记录的就是 true,否则为 false</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(flag);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;Hello&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125;,<span class="number">3000</span>);  <span class="comment">// 3秒后弹出</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(<span class="string">&quot;Hello2&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    &#125;,<span class="number">3000</span>);  <span class="comment">// 每隔3秒弹出</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="History对象"><a href="#History对象" class="headerlink" title="History对象"></a>History对象</h3><p>History 对象是 JavaScript 对历史记录进行封装的对象。</p>
<h4 id="History-对象的获取"><a href="#History-对象的获取" class="headerlink" title="History 对象的获取"></a>History 对象的获取</h4><ul>
<li>使用 window.history获取，其中window. 可以省略</li>
</ul>
<h4 id="History-对象的函数"><a href="#History-对象的函数" class="headerlink" title="History 对象的函数"></a>History 对象的函数</h4><table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>back()</td>
<td>加载history列表中的前一个URL</td>
</tr>
<tr>
<td>forword()</td>
<td>加载history列表中的下一个URL</td>
</tr>
</tbody></table>
<h3 id="Location对象"><a href="#Location对象" class="headerlink" title="Location对象"></a>Location对象</h3><p>Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。</p>
<h4 id="获取Location对象"><a href="#获取Location对象" class="headerlink" title="获取Location对象"></a>获取Location对象</h4><p>使用 window.location获取，其中window. 可以省略 </p>
<h4 id="Location对象属性"><a href="#Location对象属性" class="headerlink" title="Location对象属性"></a>Location对象属性</h4><p>location对象最常用的一个属性是 href</p>
<ul>
<li>href ：设置或返回完整的URL</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(location.<span class="property">href</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(<span class="string">&quot;跳转到百度&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    location.<span class="property">href</span> = <span class="string">&quot;https://www.baidu.com&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><p>DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 </p>
<p>封装的对象分为 </p>
<ul>
<li>Document：整个文档对象 </li>
<li>Element：元素对象 </li>
<li>Attribute：属性对象 </li>
<li>Text：文本对象 </li>
<li>Comment：注释对象</li>
</ul>
<p>JavaScript 通过 DOM， 就能够对 HTML进行操作了</p>
<ul>
<li>改变 HTML 元素的内容 </li>
<li>改变 HTML 元素的样式（CSS） </li>
<li>对 HTML DOM 事件作出反应 </li>
<li>添加和删除 HTML 元素</li>
</ul>
<h3 id="获取-Element对象"><a href="#获取-Element对象" class="headerlink" title="获取 Element对象"></a>获取 Element对象</h3><p>HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。 </p>
<p>Document 对象中提供了以下获取 Element 元素对象的函数 </p>
<ul>
<li>getElementById() ：根据id属性值获取，返回单个Element对象 </li>
<li>getElementsByTagName() ：根据标签名称获取，返回Element对象数组 </li>
<li>getElementsByName() ：根据name属性值获取，返回Element对象数组 </li>
<li>getElementsByClassName() ：根据class属性值获取，返回Element对象数组</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;image&quot;</span> <span class="attr">src</span>=<span class="string">&quot;a.jpg&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cls&quot;</span>&gt;</span>Hello World 1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cls&quot;</span>&gt;</span>Hello World 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 电影</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 旅游</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 游戏</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 根据 id 属性值获取上面的 img 元素对象，返回单个对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> img = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;image&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(img);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 根据标签名称获取所有的 div 元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> divs = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;div&quot;</span>);  <span class="comment">// 返回一个数组，数组中存储的是 div 元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">alert</span>(divs.<span class="property">length</span>);  <span class="comment">// 2</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 遍历数组</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; divs.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(divs[i]);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 获取所有的满足 name = &#x27;hobby&#x27; 条件的元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> hobbys = <span class="variable language_">document</span>.<span class="title function_">getElementsByName</span>(<span class="string">&quot;hobby&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; hobbys.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(hobbys[i]);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//  获取所有的满足 class=&#x27;cls&#x27; 条件的元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> clss = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;cls&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; clss.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">alert</span>(clss[i]);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="HTML-Element对象使用"><a href="#HTML-Element对象使用" class="headerlink" title="HTML Element对象使用"></a>HTML Element对象使用</h3><p>HTML 中的 Element 元素对象有很多，以后可以根据具体的需求查阅文档使用。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;light&quot;</span> <span class="attr">src</span>=<span class="string">&quot;off.gif&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cls&quot;</span>&gt;</span>Hello World 1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cls&quot;</span>&gt;</span>Hello World 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 电影</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 旅游</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobby&quot;</span>&gt;</span> 游戏</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 点亮</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//1，根据 id=&#x27;light&#x27; 获取 img 元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> img = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;light&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//2，修改 img 对象的 src 属性来改变图片</span></span></span><br><span class="line"><span class="language-javascript">    img.<span class="property">src</span> = <span class="string">&quot;on.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 将所有的 div 标签的标签体内容替换为 Hello</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> divs = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;div&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        style:设置元素css样式</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">        innerHTML：设置元素内容</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>;i &lt; divs.<span class="property">length</span>;i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        divs[i].<span class="property">innerHTML</span> = <span class="string">&quot;Hello&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">        divs[i].<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 使所有的复选框呈现被选中的状态</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//1，获取所有的 复选框 元素对象</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> hobbys = <span class="variable language_">document</span>.<span class="title function_">getElementsByName</span>(<span class="string">&quot;hobby&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; hobbys.<span class="property">length</span>; i++) &#123;</span></span><br><span class="line"><span class="language-javascript">        hobbys[i].<span class="property">checked</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="事件监听"><a href="#事件监听" class="headerlink" title="事件监听"></a>事件监听</h2><p>HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击 、 鼠标移动到元素之上 、 按下键盘按键 等都是事件。 </p>
<p>事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。</p>
<h3 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h3><p>JavaScript 提供了两种事件绑定方式： </p>
<ul>
<li>方式一：通过 HTML标签中的事件属性进行绑定 </li>
<li>方式二：通过 DOM 元素属性绑定</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;light&quot;</span> <span class="attr">src</span>=<span class="string">&quot;off.gif&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;开关&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;on()&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;开关&quot;</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">on</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> light = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;light&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">alert</span>(<span class="string">&quot;第一种&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">if</span> (flag === <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;on.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;off.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//方式2：获取 id=&quot;btn&quot; 元素对象，通过调用 onclick 属性 绑定点击事件</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;btn&quot;</span>).<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> light = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;light&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">alert</span>(<span class="string">&quot;第二种&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">if</span> (flag === <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;on.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;off.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="常见事件"><a href="#常见事件" class="headerlink" title="常见事件"></a>常见事件</h3><table>
<thead>
<tr>
<th>事件属性名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>onclick</td>
<td>鼠标单击事件</td>
</tr>
<tr>
<td>onblur</td>
<td>元素失去焦点</td>
</tr>
<tr>
<td>onfocus</td>
<td>元素获得焦点</td>
</tr>
<tr>
<td>onload</td>
<td>某个页面或图像被完成加载</td>
</tr>
<tr>
<td>onsubmit</td>
<td>当表单提交时触发该事件</td>
</tr>
<tr>
<td>onmouseover</td>
<td>鼠标被移到某元素之上</td>
</tr>
<tr>
<td>onmouseout</td>
<td>鼠标从某元素移开</td>
</tr>
</tbody></table>
 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;light&quot;</span> <span class="attr">src</span>=<span class="string">&quot;off.gif&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;on()&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;oo()&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;ot()&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span> = <span class="string">&quot;input&quot;</span> <span class="attr">onblur</span>=<span class="string">&quot;ob()&quot;</span> <span class="attr">onfocus</span>=<span class="string">&quot;of()&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> light = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;light&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">var</span> input = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;input&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">on</span>(<span class="params"></span>) &#123;  <span class="comment">// 鼠标单击事件</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">if</span> (flag === <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;on.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                light.<span class="property">src</span> = <span class="string">&quot;off.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">                flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">ob</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">alert</span>(<span class="string">&quot;onblur&quot;</span>);  <span class="comment">// 失去焦点</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">of</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            input.<span class="property">style</span>.<span class="property">background</span> = <span class="string">&#x27;red&#x27;</span>;  <span class="comment">// 获得焦点,背景变为红色</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">oo</span>(<span class="params"></span>) &#123;  <span class="comment">// 鼠标被移到某元素之上</span></span></span><br><span class="line"><span class="language-javascript">            light.<span class="property">src</span> = <span class="string">&quot;on.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">            flag = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">function</span> <span class="title function_">ot</span>(<span class="params"></span>) &#123;  <span class="comment">// 鼠标从某元素移开</span></span></span><br><span class="line"><span class="language-javascript">            light.<span class="property">src</span> = <span class="string">&quot;off.gif&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">            flag = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="RegExp对象"><a href="#RegExp对象" class="headerlink" title="RegExp对象"></a>RegExp对象</h2><p>RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。 </p>
<h3 id="正则对象使用"><a href="#正则对象使用" class="headerlink" title="正则对象使用"></a>正则对象使用</h3><h4 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h4><p>正则对象有两种创建方式： </p>
<ul>
<li><p>直接量方式：注意不要加引号 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var reg = /正则表达式/;</span><br></pre></td></tr></table></figure>
</li>
<li><p>创建 RegExp 对象</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var reg = new RegExp(&quot;正则表达式&quot;);</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="函数-2"><a href="#函数-2" class="headerlink" title="函数"></a>函数</h4><p>test(str) ：判断指定字符串是否符合规则，返回 true或 false </p>
<h3 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h3><p>正则表达式常用的规则如下： </p>
<ul>
<li>^：表示开始 </li>
<li>$：表示结束 </li>
<li>[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符 </li>
<li>.：代表任意单个字符，除了换行和行结束符 </li>
<li>\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9] </li>
<li>\d：代表数字字符： 相当于 [0-9]</li>
</ul>
<p>量词： </p>
<ul>
<li>+：至少一个 </li>
<li>*：零个或多个 </li>
<li>？：零个或一个 </li>
<li>{x}：x个 </li>
<li>{m,}：至少m个 </li>
<li>{m,n}：至少m个，最多n个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//1,创建正则对象，对正则表达式进行封装</span></span><br><span class="line">    <span class="keyword">var</span> reg = <span class="regexp">/^\w&#123;6,12&#125;$/</span>;</span><br><span class="line">    <span class="comment">//var reg = new RegExp(&quot;^\\w&#123;6,12&#125;$&quot;);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> str = <span class="string">&quot;abcdefg&quot;</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则</span></span><br><span class="line">    <span class="keyword">var</span> flag = reg.<span class="title function_">test</span>(str);</span><br><span class="line">    <span class="title function_">alert</span>(flag);</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/xlrblog/tags/JavaScript/" rel="tag"># JavaScript</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/xlrblog/2023/01/15/CSS%E5%AD%A6%E4%B9%A0/" rel="prev" title="CSS学习">
      <i class="fa fa-chevron-left"></i> CSS学习
    </a></div>
      <div class="post-nav-item">
    <a href="/xlrblog/2023/02/19/Flask%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0/" rel="next" title="Flask框架学习">
      Flask框架学习 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="nav-number">1.</span> <span class="nav-text">JavaScript引入方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95"><span class="nav-number">2.</span> <span class="nav-text">JavaScript基础语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B9%A6%E5%86%99%E8%AF%AD%E6%B3%95"><span class="nav-number">2.1.</span> <span class="nav-text">书写语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BE%93%E5%87%BA%E8%AF%AD%E5%8F%A5"><span class="nav-number">2.2.</span> <span class="nav-text">输出语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F"><span class="nav-number">2.3.</span> <span class="nav-text">变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.4.</span> <span class="nav-text">数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">2.5.</span> <span class="nav-text">运算符</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#x3D-x3D-%E5%92%8C-x3D-x3D-x3D-%E5%8C%BA%E5%88%AB"><span class="nav-number">2.5.1.</span> <span class="nav-text">&#x3D;&#x3D;和&#x3D;&#x3D;&#x3D;区别</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.5.2.</span> <span class="nav-text">类型转换</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5"><span class="nav-number">2.6.</span> <span class="nav-text">流程控制语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0"><span class="nav-number">2.7.</span> <span class="nav-text">函数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript%E5%B8%B8%E7%94%A8%E5%AF%B9%E8%B1%A1"><span class="nav-number">3.</span> <span class="nav-text">JavaScript常用对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E5%AF%B9%E8%B1%A1"><span class="nav-number">3.1.</span> <span class="nav-text">基本对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Array%E5%AF%B9%E8%B1%A1"><span class="nav-number">3.1.1.</span> <span class="nav-text">Array对象</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89%E6%A0%BC%E5%BC%8F"><span class="nav-number">3.1.1.1.</span> <span class="nav-text">定义格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E8%AE%BF%E9%97%AE"><span class="nav-number">3.1.1.2.</span> <span class="nav-text">元素访问</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%89%B9%E7%82%B9"><span class="nav-number">3.1.1.3.</span> <span class="nav-text">特点</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7"><span class="nav-number">3.1.1.4.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%96%B9%E6%B3%95"><span class="nav-number">3.1.1.5.</span> <span class="nav-text">方法</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#String%E5%AF%B9%E8%B1%A1"><span class="nav-number">3.1.2.</span> <span class="nav-text">String对象</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89%E6%A0%BC%E5%BC%8F-1"><span class="nav-number">3.1.2.1.</span> <span class="nav-text">定义格式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7-1"><span class="nav-number">3.1.2.2.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%87%BD%E6%95%B0-1"><span class="nav-number">3.1.2.3.</span> <span class="nav-text">函数</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1"><span class="nav-number">3.2.</span> <span class="nav-text">自定义对象</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#BOM"><span class="nav-number">4.</span> <span class="nav-text">BOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Window%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.1.</span> <span class="nav-text">Window对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96window%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.1.1.</span> <span class="nav-text">获取window对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#window%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">4.1.2.</span> <span class="nav-text">window对象属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#window%E5%AF%B9%E8%B1%A1%E5%87%BD%E6%95%B0"><span class="nav-number">4.1.3.</span> <span class="nav-text">window对象函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#History%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.2.</span> <span class="nav-text">History对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#History-%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%8E%B7%E5%8F%96"><span class="nav-number">4.2.1.</span> <span class="nav-text">History 对象的获取</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#History-%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%87%BD%E6%95%B0"><span class="nav-number">4.2.2.</span> <span class="nav-text">History 对象的函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Location%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.3.</span> <span class="nav-text">Location对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96Location%E5%AF%B9%E8%B1%A1"><span class="nav-number">4.3.1.</span> <span class="nav-text">获取Location对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Location%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">4.3.2.</span> <span class="nav-text">Location对象属性</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM"><span class="nav-number">5.</span> <span class="nav-text">DOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96-Element%E5%AF%B9%E8%B1%A1"><span class="nav-number">5.1.</span> <span class="nav-text">获取 Element对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-Element%E5%AF%B9%E8%B1%A1%E4%BD%BF%E7%94%A8"><span class="nav-number">5.2.</span> <span class="nav-text">HTML Element对象使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC"><span class="nav-number">6.</span> <span class="nav-text">事件监听</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="nav-number">6.1.</span> <span class="nav-text">事件绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E4%BA%8B%E4%BB%B6"><span class="nav-number">6.2.</span> <span class="nav-text">常见事件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#RegExp%E5%AF%B9%E8%B1%A1"><span class="nav-number">7.</span> <span class="nav-text">RegExp对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E5%AF%B9%E8%B1%A1%E4%BD%BF%E7%94%A8"><span class="nav-number">7.1.</span> <span class="nav-text">正则对象使用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="nav-number">7.1.1.</span> <span class="nav-text">创建对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%87%BD%E6%95%B0-2"><span class="nav-number">7.1.2.</span> <span class="nav-text">函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">7.2.</span> <span class="nav-text">正则表达式</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="君不见"
      src="/xlrblog/images/avatar.gif">
  <p class="site-author-name" itemprop="name">君不见</p>
  <div class="site-description" itemprop="description">君不见，黄河之水天上来，奔流到海不复回。</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/xlrblog/archives/">
        
          <span class="site-state-item-count">50</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">9</span>
        <span class="site-state-item-name">分类</span>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">25</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/decxlr" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;decxlr" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">君不见</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/xlrblog/lib/anime.min.js"></script>
  <script src="/xlrblog/lib/velocity/velocity.min.js"></script>
  <script src="/xlrblog/lib/velocity/velocity.ui.min.js"></script>

<script src="/xlrblog/js/utils.js"></script>

<script src="/xlrblog/js/motion.js"></script>


<script src="/xlrblog/js/schemes/pisces.js"></script>


<script src="/xlrblog/js/next-boot.js"></script>




  




  
<script src="/xlrblog/js/local-search.js"></script>













  

  

</body>
</html>
